<template>
	<div class="app-container">
		<el-row style="padding-bottom:30px;">
		 <el-button type="primary" icon ="plus" @click="addNewDept('parent')">新建部门</el-button>
		 <el-button type="primary" icon ="el-icon-upload2" @click="importFile">批量上传</el-button>
		</el-row>
		<el-row>
			<el-col :span="21">
				<tree-table :data="depList" :columns="columns" border>
					<el-table-column label="操作" >
				        <template slot-scope="scope">
				        	<el-button type="primary" size="small"  icon="plus" @click="addNewDept( scope.row)">添加子部门</el-button>
				        	<el-button type="success" size="small" icon="edit" @click="changeDept( scope.row)">修改部门</el-button>
				        	<el-button type="danger" size="small" icon="delete" @click="deletDept( scope.row)">删除部门</el-button>
				        </template>
				      </el-table-column>
				</tree-table>	
			</el-col>
		</el-row>
		<batch-import :importVisible="importVisible" @closeDiag="closeDiag" @uploadSuccess="uploadSuccess"></batch-import>
		
	</div>
</template>

<script>
    import company from '../../components/common/company'
	import {getComanyId} from '@/utils/auth'
	import treeTable from '@/components/TreeTable'
	import { getDeptList, newDept, changeDept, deleteDept, getDeptInfo} from '@/api/student'
	import batchImport from '@/components/batchImport/batchImport'
	export default {
		name: 'department',
		components: {
			treeTable,
			batchImport,
			company
		},
		data() {
			return {
				companyId:"",
				importVisible:false,//控制批量上传弹窗
				columns: [
					{
						text: '部门名称',
						value: 'name',
						width: 400
					}
				],
				depList: []
				
			}
		},
		created() {
			let companyId = getComanyId();
			this.companyId = companyId;
			this.getList(this.companyId);
			let data = {
				importUrl:'/asset/file/import_department.xls',
				uploadUrl:'/admin/dept/importExcel',
			};
			this.$store.dispatch('setImportData', data);
		},
		methods: {
			closeDiag(val){
				this.importVisible = val;
			},
			uploadSuccess(){//批量上传成功
				this.getList(this.companyId);
			},
			getList(id) {
				let that = this;
				getDeptList(id).then((res) => {
					that.depList = res.entity;
				})
			},
			addNewDept(row) {
				let that = this;
		        this.$prompt('请输入部门名称', '新建部门', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		        }).then(({ value }) => {
		          let data ={
					  'name': value,
					  'companyId':this.companyId
		          };
		          if(row !== "parent"){
		          	data["parentId"] = row.id;
		          }else{
		          	data["parentId"] = 0;
		          }
		          newDept(data).then((res) =>{
		          	that.getList(this.companyId);
		          })
		        }).catch(() => {
		                 
		        });
		    },
		    changeDept(row){
		    	let that = this;
		    	this.$prompt('请输入部门名称', '修改部门', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		        }).then(({ value }) => {
					let data = {
						'id': row.id,
						'name': value,
						'companyId':this.companyId,
						'parentId':row.parentId
					};
		          changeDept(data).then((res) =>{
		          	that.getList(this.companyId);
		          })
		        }).catch(() => {
		                 
		        });
		    },
		    deletDept(row){
		    	let that = this;
		    	let id = row.id;
		    	this.$confirm('是否确定删除部门？ 删除之后将无法恢复！', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		         	deleteDept(id).then((res) =>{
		         		that.getList(this.companyId);
		         	});
		        }).catch(() => {
             
        		});
		    },
		    lookDept(row){
		    	let that = this;
		    	let id = row.id;
		    	getDeptInfo(id).then((res) =>{
		    		let data = res.entity;
		    		
		    	})
		    },
		    importFile(){
				this.importVisible = true;
				
			},
		    
		    
		}
	}
</script>

<style  scoped>
	
</style>